<template>
  <SuperTable ref="superTableRef" search pager border align="center" header-title="三方系统" :columns="columns" :data-request="fetchData" :export-config="{}">
    <template #action>
      <Button type="primary" @click="showEditModalFn('新增')">新增系统</Button>
    </template>
  </SuperTable>

  <TsEditModal v-model:show-modal="state.showEditModal" :data="state.currentData" :title="state.currentTitle" @edit-modal-ok="refreshTableFn" />
  <TsEquipmentModal v-model:show-modal="state.showEquipmentModal" :data="state.currentData" />
</template>

<script setup lang="tsx">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import TsEditModal from '@/modules/system-docking/pages/tripartite-system/components/ts-edit-modal.vue';
import TsEquipmentModal from '@/modules/system-docking/pages/tripartite-system/components/ts-equipment-modal.vue';
import { VxeGridPropTypes } from 'vxe-table';
import type { TableColumnItem } from './columns';
import { baseColumns } from './columns';
import { reactive, ref } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { message } from 'ant-design-vue';
import { delThirdSystem, getThirdSystem } from '@/modules/system-docking/api/tripartite-system';

/**
 * data
 */
const state: {
  currentTitle: string;
  showEditModal: boolean;
  showEquipmentModal: boolean;
  currentData: any;
} = reactive({
  currentTitle: '',
  showEditModal: false,
  showEquipmentModal: false,
  currentData: {},
});

/**
 * fn
 */
const showEditModalFn = async (params: string) => {
  if (params === '新增') {
    state.currentData = {};
  }
  state.currentTitle = params;
  state.showEditModal = true;
};

/**
 * table
 */
const superTableRef = ref<InstanceType<typeof SuperTable>>();
const columns: TableColumnItem[] = [
  ...baseColumns,
  {
    title: '设备数量',
    field: 'quantity',
    slots: {
      default({ row }) {
        return (
          <Button
            type={'link'}
            onClick={() => {
              state.currentData = row;
              state.showEquipmentModal = true;
            }}
          >
            {row.quantity}
          </Button>
        );
      },
    },
    hideInSearch: true,
  },
  {
    title: '操作',
    field: '$action',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    width: 200,
    actions: ({ row }) => [
      {
        label: '修改',
        onClick: () => {
          state.currentData = row;
          showEditModalFn('修改');
        },
      },
      {
        label: '删除',
        popConfirm: {
          title: `确认要删除该系统？`,
          onConfirm: async () => {
            await delThirdSystem(row.id);
            message.success('操作成功！');
            refreshTableFn();
          },
        },
      },
    ],
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let data = superTableRef.value?.getFormModel();
  let params = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    // orderBy: [
    //   {
    //     field: 'createTime',
    //     order: 'desc',
    //   },
    // ],
    ...data,
  };
  let res = await getThirdSystem(params);
  console.log(res, 11111111111);
  return res.result;
  // return {
  //   data: [{},{},{}],
  //   pageIndex: 1,
  //   pageSize: 10,
  //   total: 100,
  // };
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};
</script>

<style scoped lang="less"></style>
